<template>
  <div class="app-container d-flex"
       v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading">
    <div class="h-100 w-7">
      <!-- 设备数据查询 -->
      <div class="h-100 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">设备数据查询</div>
            </div>
          </div>
          <div class="item_content">
            <div class="height-20 w-100 pl-3">
              <el-form size="medium" :inline="true" :model="formInline" :rules="rules" ref="accountModelRef"
                       class="demo-form-inline">
                <el-form-item label="设备:" prop="reportName">
                  <el-select v-model="formInline.reportName" filterable placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.deviceCode"
                      :label="item.deviceName"
                      :value="item.deviceCode">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="日期:" prop="day">
                  <el-date-picker
                    v-model="formInline.day"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="时间范围" prop="time">
                  <!--                  <el-date-picker-->
                  <!--                    v-model="formInline.time"-->
                  <!--                    :default-time="['00:00:00', '00:00:00']"-->
                  <!--                    :selectable-range="selectableRange"-->
                  <!--                    :picker-options="pickerOptions"-->
                  <!--                    @change="handleTimeChange"-->
                  <!--                    class="datepicker-content"-->
                  <!--                    format="yyyy-MM-dd HH"-->
                  <!--                    value-format="yyyy-MM-dd HH:00:00"-->
                  <!--                    type="datetimerange"-->
                  <!--                    range-separator="至"-->
                  <!--                    start-placeholder="开始日期"-->
                  <!--                    end-placeholder="结束日期">-->
                  <!--                  </el-date-picker>-->
                  <el-time-picker
                    is-range
                    v-model="formInline.time"
                    :picker-options="{start: '00', step: '01', end: '23'}"
                    :default-time="['23:59:59', '23:59:59']"
                    @change="handleTimeChange"
                    format="HH"
                    value-format="HH"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="类型:" prop="paramCode">
                  <el-select v-model="formInline.paramCode" filterable placeholder="请选择">
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :disabled="addOrUpdateLoading" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="height-80 w-100 d-flex-center">
              <div class="h-100 w-100" id="line-first"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-100 w-5">
      <!-- 设备数据查询 -->
      <div class="h-100 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">设备数据查询</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 d-flex-center">
              <div class="h-100 w-100">
                <el-table
                  :data="tableData"
                  height="100%"
                  class="flex-1 over-auto-y"
                  :row-class-name="tableRowClassName"
                  style="width: 100%;height: 100%;">
                  <el-table-column type="index" label="序号" width="70" align="center"/>
                  <el-table-column prop="parameterName" label="数据类型" align="center"></el-table-column>
                  <el-table-column prop="parameterValue" label="数据值"  align="center"></el-table-column>
                  <el-table-column prop="createTime" label="时间" align="center"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryDeviceReportList,
  } from "@/api/user.js"
  import {
    queryReportByOneDevice,
    queryReportByOneDeviceByPage
  } from "@/api/electrician/index.js"

  export default {
    components: {},
    data() {
      return {
        timeout: [],

        formInline: {
          reportName: "",
          day: "",
          time: [new Date(2024, 9, 10, 0, 0), new Date(2024, 9, 10, 0, 0)],
          paramCode: ""
        },
        rules: {
          reportName: [{required: true, message: '请选择设备', trigger: 'change'}],
          day: [{required: true, message: '请选择日期', trigger: 'change'}],
          time: [{required: true, message: '请选择时间范围', trigger: 'change'}],
          paramCode: [{required: true, message: '请选择类型', trigger: 'change'}],
        },
        loading: false,
        addOrUpdateLoading: false,
        tableData: [],
        oneCarData: {
          xData: ['暂无数据'],
          seriesData: [0],
          unit: ""
        },
        twoCardData: {
          xData: [],
          seriesData: [],
          descList: [],
        },
        options: [],
        options2: [{
          value: "IA", name: "电流"
        }, {
          value: "UA", name: "电压"
        }, {
          value: "PA", name: "功率"
        }, {
          value: "POWER_SYS", name: "能耗"
        }],

        selectableRange: '00:00:00 - 23:00:00',
        pickerOptions: {
          disabledDate(time) {
            const now = new Date();
            now.setMonth(now.getMonth() - 2);
            // 获取两个月前的时间的时间戳
            const twoMonthsAgo = now.getTime();
            return time.getTime() > Date.now() - 8.64e7 || time.getTime() < twoMonthsAgo; // 不可选今天之后的日期
          }
        }
      }
    },
    created() {
      this.queryDeviceReportList()
    },
    mounted() {
      charts.lineEchart('line-first', this.oneCarData)
    },
    methods: {
      queryDeviceReportList() {
        queryDeviceReportList().then(res => {
          this.options = res.object || []
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 0) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
      },
      handleTimeChange(value) {
        if (value && value.length === 2) {
          const startTime = parseInt(value[0])
          const endTime = parseInt(value[1])
          if (endTime - startTime < 1 || endTime - startTime > 6) { // 6小时的毫秒数
            this.$message.error('时间范围为1至6小时之间');
            // 重置时间范围
            this.formInline.time = [new Date(2024, 9, 10, 0, 0), new Date(2024, 9, 10, 0, 0)];
          }
        }
      },

      onSubmit() {
        // console.log(this.formInline.time[0].getTime())
        // console.log(this.formInline.day + ' ' + this.formInline.time[1] + ':59:59')
        this.$refs.accountModelRef.validate(async (v) => {
          if (v) {
            this.oneCarData.xData = []
            this.oneCarData.seriesData = []

            let that = this
            this.loading = true
            this.addOrUpdateLoading = true
            let reportName = this.formInline.reportName
            let startTime = this.formInline.day + ' ' + this.formInline.time[0] + ':00:00'
            let endTime = this.formInline.day + ' ' + this.formInline.time[1] + ':59:59'

            await queryReportByOneDevice({
              deviceCode: reportName,
              startTime: startTime,
              endTime: endTime,
              paramCode: this.formInline.paramCode,
            }).then(res => {
              let tempData = res.object

              this.oneCarData.xData = tempData.xData
              this.oneCarData.unit = tempData.unit
              this.oneCarData.descList = tempData.descList

              if (tempData.seriesData1.length > 0) {
                this.oneCarData.seriesData.push({
                  type: 'line',
                  name: tempData.descList[0],
                  data: tempData.seriesData1
                })
              }
              if (tempData.seriesData2.length > 0) {
                this.oneCarData.seriesData.push({
                  type: 'line',
                  name: tempData.descList[1],
                  data: tempData.seriesData2
                })
              }
              if (tempData.seriesData3.length > 0) {
                this.oneCarData.seriesData.push({
                  type: 'line',
                  name: tempData.descList[2],
                  data: tempData.seriesData3
                })
              }

              charts.lineEchart('line-first', this.oneCarData)
              that.loading = false
              that.addOrUpdateLoading = false
            }).catch(() => {
              that.loading = false
              that.addOrUpdateLoading = false
            })
            await queryReportByOneDeviceByPage({
              deviceCode: reportName,
              startTime: startTime,
              endTime: endTime,
              paramCode: this.formInline.paramCode,
            }).then(res => {
              let tempData = res.object
              this.tableData = tempData
            }).catch(() => {

            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .height-20 {
    height: 20%;
  }

  .height-80 {
    height: 80%;
  }

  .item_title {
    width: 100%;
    height: 5%;
  }

  .item_content {
    width: 100%;
    height: 95%;
  }

  ::v-deep.el-form-item--medium .el-form-item__label {
    color: #ffffff !important;
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
  }

  ::v-deep.el-button--primary {
    /*color: #fff;*/
    /*background-color: #1A2F2D;*/
    /*border-color: #1A2F2D;*/
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }
</style>

<style lang="scss">
  .el-time-range-picker__body .el-time-spinner__wrapper {
    width: 100% !important;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #0d515a !important;
  }

  .el-table th.el-table__cell {
    background-color: #204B5D !important;
    color: #ffffff;
  }

  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #204B5D !important;
  }

  .el-table, .el-table__expanded-cell {
    background: rgba(14, 71, 84, 0.67);
  }

  .el-table::before {
    height: 0px !important;
  }

  .el-table .warning-row {
    background: rgba(14, 71, 84, 0.67);
    color: #ffffff;
  }

  .el-table .success-row {
    background: rgba(14, 71, 84, 0.67);
    color: #ffffff;
  }

  .el-table--scrollable-y .el-table__body-wrapper {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
    background: rgba(14, 71, 84, 0.67);
  }
</style>
